<template>
<view class="loading">
  <view class="dot dot1"></view>
  <view class="dot dot2"></view>
  <view class="dot dot3"></view>
  <view class="dot dot4"></view>
  <view class="dot dot5"></view>
  <view class="dot dot6"></view>
  <view class="dot dot7"></view>
  <view class="dot dot8"></view>
	<view class="text">正在加载中...</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
	}
</script>

<style>
.loading {
  position: relative;
  width: 35vw;
  height: 35vw;
  margin: 100px auto;
}

.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #53fddb;
  animation: scale 1s infinite alternate;
}
.text {
  position: absolute;
  bottom: -80px; /* 让text始终保持在动画下方10px */
  left: 50%; /* 居中 */
  transform: translateX(-50%); /* 居中 */
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 19.6px;
  color: rgba(98, 98, 102, 1);
  text-align: center; /* 居中 */
  width: 100%; /* 让text占满父容器 */
}

.dot1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-duration: 1s;
}

.dot2 {
  top: 15%;
  left: 85%;
  transform: translate(-50%, -50%);
  animation-duration: 1.1s;
}

.dot3 {
  top: 50%;
  left: 95%;
  transform: translate(-50%, -50%);
  animation-duration: 1.2s;
}

.dot4 {
  top: 85%;
  left: 85%;
  transform: translate(-50%, -50%);
  animation-duration: 1.3s;
}

.dot5 {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  animation-duration: 1.4s;
}

.dot6 {
  top: 85%;
  left: 15%;
  transform: translate(-50%, -50%);
  animation-duration: 1.5s;
}

.dot7 {
  top: 50%;
  left: 5%;
  transform: translate(-50%, -50%);
  animation-duration: 1.6s;
} 

.dot8 {
  top: 15%;
  left: 15%;
  transform: translate(-50%, -50%);
  animation-duration: 1.7s;
}

@keyframes scale {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.5);
  }
}

</style>